<template>
  <div class="punishAdmin">
    <el-button type="primary" style="margin-bottom: 10px" @click="drawer = true">
      新增惩罚
    </el-button>

    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
      <div class="drawer-content">
        <el-form :model="punish" label-width="80px">
          <el-form-item label="惩罚内容">
            <el-input type="textarea" v-model="punish.punishDescription" />
          </el-form-item>
          <el-form-item label="权重">
            <el-input-number v-model="punish.punishWeight" :min="1" :max="100" />
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="addPunish">提交</el-button>
      </div>
    </el-drawer>
    <el-card>
      <el-table :data="punishDataList" style="width: 100%">
        <el-table-column prop="punishDescription" label="惩罚内容" width="600" />
        <el-table-column prop="punishWeight" label="权重占比(占比越高抽中概率越大)" width="280" />
        <el-table-column align="right" fixed="right" min-width="150">
          <template #default="scope">
            <el-button size="default" type="primary" plain @click="openDialog(scope.row)">
              编辑
            </el-button>
            <el-popconfirm
              title="确定要删除这个惩罚吗？"
              @confirm="deletePunish(scope.row.id)"
              confirm-button-text="确定"
              cancel-button-text="取消"
            >
              <template #reference>
                <el-button size="default" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <PunishEdit v-model:dialogVisible="dialogVisible" :punish="punishSelected" @load-data="loadData"/>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import PunishEdit from '@/views/punish/components/PunishEdit.vue'
import type { Punish } from '@/types/StudentType.ts'




const dialogVisible = ref(false)
const punishSelected = ref()
const punishDataList = ref([])
const drawer = ref(false)
const searchValue = ref({
  pageSize: 10,
  current: 1,
  punishDescription: ''
})
const punish = ref({
  punishDescription: '',
  punishWeight: 0
})


const loadData = async () => {
  const res = await axios.post('/api/punish/list/page/vo', searchValue.value)
  if (res.data.code === 0) {
    punishDataList.value = res.data.data.records
  } else {
    ElMessage.error('获取数据失败！')
  }
}
const addPunish = async () => {
  const res = await axios.post('/api/punish/add', punish.value)
  if (res.data.code === 0) {
    ElMessage.success("添加成功！")
    drawer.value = false
    loadData()
    punish.value.punishWeight = 0
    punish.value.punishDescription = ''
  } else {
    ElMessage.error('添加失败！')
  }
}
const deletePunish = async (id: number) => {
  const res = await axios.post('/api/punish/delete', { id: id })
  if (res.data.code === 0) {
    ElMessage.success('删除成功！')
    loadData()
  } else {
    ElMessage.error('删除失败！')
  }
}
const openDialog = (punish: Punish) => {
  dialogVisible.value = true
  punishSelected.value = punish
}


onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
.punishAdmin{
  padding-top: 20px;
}
</style>
